<template>
  <el-dialog
    class="custom-dialog"
    width="40%"
    append-to-body
    :visible.sync="isVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <span slot="title" class="dialog-title">
      {{ title }}
    </span>
    <el-form
      ref="elForm"
      class="custom-form"
      size="small"
      label-position="right"
      :model="form"
      :rules="rules"
      label-width="33%"
    >
      <el-row>
        <el-col :span="20">
          <el-form-item label="属性名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="输入属性名称"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="属性值">
            <el-input v-model="form.value" placeholder="输入属性值" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="排序">
            <el-input-number
              v-model="form.orderNum"
              placeholder="排序"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        size="mini"
        :disabled="submitLoading"
        :loading="submitLoading"
        @click="toSave"
        style="margin-right: 10px"
      >
        {{ paramsAttribute.operationType == 'add' ? '保存' : '修改' }}
      </el-button>
      <el-button
        size="mini"
        :disabled="submitLoading"
        @click="isVisible = false"
      >
        取消
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import dataFormMixins from '@/mixins/data-form-mixins'
export default {
  name: 'DeviceAttributeAdd',
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    paramsAttribute: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  created() {},
  mounted() {
    this.rules = this.initRules()
    this.form = this.initForm()
    if (this.paramsAttribute.operationType === 'edit') {
      this.form = { ...this.paramsAttribute.item }
    }
  },
  methods: {
    initRules() {
      return {
        name: this.getValidatorForm(),
      }
    },
    initForm() {
      return {
        id: -1,
        orderNum: 1,
        deviceCode: this.paramsAttribute.deviceCode, // 设备内部编码
        name: '', // 属性名称
        value: '', // 属性值
      }
    },
    toClose() {
      this.$emit('close')
    },
    toSave() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          const model = this.formatFormData(this.form)
          this.isVisible = false
          const returnObj = {
            data: model,
            type: this.paramsAttribute.operationType,
          }
          this.$emit('save', returnObj)
        } else {
          this.$message({
            message: '*必填项不能为空！',
            type: 'warning',
            duration: 4000,
          })
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-title {
  font-size: 18px;
  color: #303133;
}
.el-button--mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.el-form-item--small.el-form-item {
  margin: 6px 0;
}
.custom-form >>> .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  line-height: 32px;
  padding: 0 4px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000000d9 !important;
  font-weight: normal;
}
.custom-form >>> .el-form-item__label::after {
  content: ':';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
.custom-form >>> .el-form-item--small .el-form-item__error {
  padding-top: 2px;
  margin-bottom: -6px;
  position: relative;
}
.custom-form >>> .el-input-number--small {
  line-height: 30px !important;
  width: 100%;
}
.custom-dialog >>> .el-dialog {
  box-shadow: 0 0 20px #629bf7;
}
</style>

